<!doctype html>
<html lang="{{ config('app.locale') }}">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
  <meta name="_token" content="{{ csrf_token() }}"/>

  <link href="{{env('CDN_RESOURCE')}}/mobile/campaign/insect/css/insect.css?v={{config('app.version')}}" rel="stylesheet" type="text/css">


  <title>Qkids久趣英语</title>

</head>
<body>

<div class="banner-wrapper">
  <img style="-webkit-user-select: none;" src="{{env('CDN_RESOURCE')}}/mobile/campaign/insect/img/top_bg2.jpg">
  {{--<div class="play-icon-2" id="viewVideo2" style="top: 80vw;left: 45vw;"></div>--}}
  <div class="play-icon" id="viewVideo" style="top: 80vw;left: 45vw;"></div>
  <script>
    var v1 = document.getElementById('viewVideo'), v2 = document.getElementById('viewVideo2'),
      colorOn = 'rgba(36, 193, 121, 1)',
      colorOff = 'rgba(36, 193, 121, 0)',
      radiusOn = '10px ',
      radiusOff = '0px 0px 0px 0px ',
      on =
        radiusOn + radiusOn + radiusOn + radiusOn + colorOff + ',' +
        radiusOn + '-' + radiusOn + radiusOn + radiusOn + colorOff + ',' +
        '-' + radiusOn + radiusOn + radiusOn + radiusOn + colorOff + ',' +
        '-' + radiusOn + '-' + radiusOn + radiusOn + radiusOn + colorOff,
      off =
        radiusOff + colorOn + ',' +
        radiusOff + colorOn + ',' +
        radiusOff + colorOn + ',' +
        radiusOff + colorOn

    var count = true
    v1.style.transition = 'transform 0.7s linear 0s'
    setInterval(function () {
      v1.style.transform = 'scale(' + (count ? '1.2' : '1') + ')'
      count = !count
    }, 700)

    // v1.style.boxShadow = off
    // v2.style.boxShadow = off
    // animation()
    // setInterval(animation, 10000)

    function animation () {
      console.log('v1=on')
      v1.style.transition = 'box-shadow 9.9s linear 0s'
      v1.style.boxShadow = on
      setTimeout(function () {
        console.log('v1=off')
        v1.style.transition = ''
        v1.style.boxShadow = off
      }, 9900)
      setTimeout(function () {
        console.log('v2=on')
        v2.style.transition = 'box-shadow 9.9s linear 0s'
        v2.style.boxShadow = on
        setTimeout(function () {
          console.log('v2=off')
          v2.style.transition = ''
          v2.style.boxShadow = off
        }, 9900)
      }, 5000)
    }
  </script>
  <div id="switch-account" class="switch-account">登录</div>
</div>

<div class="wrapper">

  <div class="section" style="padding: 8px 0 6.13vw 0;background-color: #1EA866;">
    <div id="buyAlone-btn" class="buyAlone-btn" data-field="{{$extraCampaignProduct['p_id']}}">立即报名</div>
    <div id="stop-1" class="buyAlone-btn stop" style="display: none;">活动已停止</div>
    {{--<div class="buyAlone-btn stop">活动已停止</div>--}}

    <div class="fixed-btns">
      <div id="applyGroupFix2" class="stick-group-btn" data-field="{{$extraCampaignProduct['p_id']}}">立即报名</div>
      <div id="stop-2" class="stick-group-btn stop" style="display: none;width: 100%;left: 0;border-radius: 0;">活动已停止</div>
    </div>
    <div id="groupBuyDetail" style="display: none;">
      <div class="group-buy-list" id="groupBuyList">

        <div class="group-member first-member">
          <img src="{{env('CDN_RESOURCE')}}/mobile/campaign/insect/img/empty.png">
          <span>第1人</span>
        </div>

        <div class="group-member second-member">
          <img src="{{env('CDN_RESOURCE')}}/mobile/campaign/insect/img/empty.png">
          <span>第2人</span>
        </div>

        <div class="group-member third-member">
          <img src="{{env('CDN_RESOURCE')}}/mobile/campaign/insect/img/empty.png">
          <span>第3人</span>
        </div>
      </div>
      <img class="group-buy-bg" src="{{env('CDN_RESOURCE')}}/mobile/campaign/insect/img/member.png">
      <div class="group-buy-status" id="groupBuyStatus" style="display: none !important;">
      </div>
    </div>
    <div class="notice" style="display: none;">
      成团时间：
      <span class="day">02</span>天
      <span class="hour">00</span>:
      <span class="min">00</span>:
      <span class="sec">00</span>
    </div>
  </div>


  <div class="section" style="padding:10px 0 55px 0;background-color: #1EA866;display: none;">
    <div class="header" style="margin-top: 0;width: 40.53vw;">
      <img src="{{env('CDN_RESOURCE')}}/mobile/campaign/insect/img/title-1.png">
    </div>
    <div class="camp-step">
      <div class="item">
        <div class="group-buy-step1 icon"></div>
        <span>开团当团长</span>
      </div>
      <div class="item">
        <div class="group-buy-step2 icon"></div>
        <span>参团支付</span>
      </div>
      <div class="item">
        <div class="group-buy-step3 icon"></div>
        <span>邀请好友参团</span>
      </div>
      <div class="item">
        <div class="group-buy-step4 icon"></div>
        <span>团购完成</span>
      </div>
      <div>
        <div class="connect-line"></div>
        <div class="connect-line"></div>
        <div class="connect-line"></div>
      </div>
    </div>
  </div>

  <div class="section" style="padding: 0;margin: 0;font-size: 0;">
    <img style="margin: 0;-webkit-user-select: none;"
         src="{{env('CDN_RESOURCE')}}/mobile/campaign/insect/img/story-1.jpg">
  </div>
  <div class="section" style="padding: 0;margin: 0;font-size: 0;">
    <img style="margin: 0;-webkit-user-select: none;"
         src="{{env('CDN_RESOURCE')}}/mobile/campaign/insect/img/story-2.jpg">
    <div class="lesson-section">
      <div id="section-bar" class="section-bar"></div>
      <div class="section-text">
        <div id="difficulty-1" class="section-text-item" style="color: #FFEDC9;" onclick="sectionItemClick(1)">难度A</div>
        <div id="difficulty-2" class="section-text-item" onclick="sectionItemClick(2)">难度B</div>
        <div id="difficulty-3" class="section-text-item" onclick="sectionItemClick(3)">难度C</div>
      </div>
      <div class="section-line"></div>
    </div>
    <div class="three-difficulty-wrap">
      <div id="three-difficulty" class="three-difficulty">
        <img style="-webkit-user-select: none;" src="{{env('CDN_RESOURCE')}}/mobile/campaign/insect/img/story-2-1.png">
        <img style="-webkit-user-select: none;" src="{{env('CDN_RESOURCE')}}/mobile/campaign/insect/img/story-2-2.png">
        <img style="-webkit-user-select: none;" src="{{env('CDN_RESOURCE')}}/mobile/campaign/insect/img/story-2-3.png">
      </div>
    </div>

    <script>
      function sectionItemClick (index) {
        var sectionTextItem = document.getElementsByClassName('section-text-item')
        setTimeout(function () {
          for (var i = 0; i < sectionTextItem.length; i++) sectionTextItem[i].style.color = '#9A6322'
          document.getElementById('difficulty-' + index).style.color = '#FFEDC9'
        }, 150)
        document.getElementById('section-bar').style.transform = 'translate(' + ((index - 1) * 116) + '%, 0)'
        document.getElementById('three-difficulty').style.transform = 'translate(-' + ((index - 1) * 100) / 3 + '%, 0)'
      }
    </script>
  </div>
  <div class="section" style="padding: 0;margin: 0;font-size: 0;">
    <img style="margin: 0;" src="{{env('CDN_RESOURCE')}}/mobile/campaign/insect/img/story-3.jpg">
  </div>
  <div class="section" style="padding: 0;margin: 0;font-size: 0;">
    <img style="margin: 0;pointer-events: auto;" onclick="return false"
         src="{{env('CDN_RESOURCE')}}/mobile/campaign/insect/img/story-4.jpg">
  </div>

  <div class="video-mask" id="videoMask">
    <div class="close-icon icon" id="closeVideo"></div>
    <div id="videoContainer" class="video">
    </div>
    <style>
      .vcp-player {
        margin: 0 auto;
      }
    </style>
  </div>


  <div class="buy-restrict">
    <div class="info">
      您已经购买过 ¥100／4课时，建议您购买长期课时
    </div>

    <a href="/wx/vip">
      <div class="small-btn confirm-btn">前往购买</div>
    </a>

  </div>


  <div class="group-status" id="groupStatus">
    <div class="explanation">

      <div class="top-banner">
        {{--<img class="santa sad-santa"--}}
        {{--src="{{env('CDN_RESOURCE')}}/mobile/campaign/insect/img/sad_santa.png">--}}
        {{--<img class="santa happy-santa"--}}
        {{--src="{{env('CDN_RESOURCE')}}/mobile/campaign/insect/img/happy_santa.png">--}}

      </div>

      <div class="content">
        <div class="group-detail">
          <div class="title"></div>
          <div class="text"></div>
        </div>
        <div class="reg-btn ok-btn" id="okBtn">确定</div>
      </div>
    </div>
  </div>

  <div class="group-status" id="closeBuy">
    <div class="explanation">

      <div class="top-banner"></div>

      <div class="content">
        <div class="group-detail">
          <div class="title">提示</div>
          <div class="text">本期拼读课名额已抢完，请您留意微信"久趣英语服务号"的招募推送，我们下期见~</div>
        </div>
        <div style="text-align: center;">
          <div class="reg-btn ok-btn" style="width: 80%; display: inline-block;" id="cancelBtn1"
               onclick="document.getElementById('closeBuy').style.display='none'">取消
          </div>
        </div>
      </div>

    </div>
  </div>

  <div class="group-status" id="confirmBuy">
    <div class="explanation">

      <div class="top-banner"></div>

      <div class="content">
        <div class="group-detail">
          <div class="title">提示</div>
          <div class="text">拼读课程目前推出L1级别，适合4-6岁，零基础或有半年以内英语基础的孩子学习。请确认是否报名。</div>
        </div>
        <div style="text-align: center;">
          <div class="reg-btn ok-btn"
               style="width: 35%; display: inline-block;margin-right: 5%;background-color: #85D84B;" id="buy-btn">购买
          </div>
          <div class="reg-btn ok-btn" style="width: 35%; display: inline-block;" id="cancelBtn"
               onclick="document.getElementById('confirmBuy').style.display='none'">取消
          </div>
        </div>
      </div>

    </div>
  </div>

  <div class="buy-restrict">
    <div class="info">
      您已经购买过 ¥100／4课时，建议您购买长期课时
    </div>

    <a href="/wx/vip">
      <div class="small-btn confirm-btn">前往购买</div>
    </a>

  </div>


  <div class="share-mask">
    <div class="share-arrow"></div>
    {{--<div class="share-text">点击分享给好友 ^ _ ^ </div>--}}
  </div>

  <div id="alertBox" class="alert-box"></div>

</div>

<script type="text/javascript" src="https://static-app.97kid.com/wx/js/zepto.min.js"></script>
<!--引入微信js-SDK-->
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript" src=" {{env('CDN_RESOURCE')}}/js/mobile/wx_config.js?v={{config('app.version')}}"></script>
<script type="text/javascript" src="{{env('CDN_RESOURCE')}}/js/mobile/Zepto_fx_methods.js"></script>
<script type="text/javascript" src="{{env('CDN_RESOURCE')}}/js/mobile/login.js?v={{config('app.version')}}"></script>
<script type="text/javascript" src="{{env('CDN_RESOURCE')}}/js/AV.analytics.js"></script>


<script type="text/javascript">

  (function ($) {

    $(function () {
      if (utils.getUrlParam('alert') === 'qrcode') {
        $('#groupStatus .text').text('微信关注【久趣英语服务号】才能上课')
        $('#groupStatus').show()
      }
      if (!utils.getQueryString('_c')) {
        var QKidsChannel = JSON.parse(window.localStorage.getItem('QKidsChannel'))
        if (!(QKidsChannel && QKidsChannel.expires > new Date().getTime() / 1000)) {
          window.localStorage.setItem('QKidsChannel', JSON.stringify({
            rawData: 'insect_share',
            expires: new Date().getTime() / 1000 + 24 * 3600
          }))
        }
      }

      if (new Date().getTime() > 1539187199000) {
        $('#buyAlone-btn').hide()
        $('#applyGroupFix2').hide()
        $('#stop-1').show()
      }

      $(document).bind('scroll', function () {
        if (new Date().getTime() > 1539187199000) {
          var rect = document.getElementById('stop-1').getBoundingClientRect()
          if ((rect.top + rect.height) < 0) {
            $('#applyGroupFix2').hide()
            $('#stop-2').show()
          } else {
            $('#applyGroupFix2').hide()
            $('#stop-2').hide()
          }
        } else {
          var rect = document.getElementById('buyAlone-btn').getBoundingClientRect()
          if ((rect.top + rect.height) < 0) {
            $('#applyGroupFix2').show()
            $('#stop-2').hide()
          } else {
            $('#applyGroupFix2').hide()
            $('#stop-2').hide()
          }
        }
      })

      var CDN_RESOURCE = "{{env('CDN_RESOURCE')}}"
      var currentLevel = 1
      var previousLevel = 1
      var offset = 5
      var isInWechat = false
      var userAgent = navigator.userAgent
      //var userAgent = "Mozilla/5.0(iphone;CPU iphone OS 5_1_1 like Mac OS X) AppleWebKit/534.46(KHTML,like Geocko) Mobile/9B206 MicroMessenger/5.0";
      var wechatInfo = userAgent.match(/MicroMessenger\/([\d\.]+)/i)
      if (wechatInfo) {
        isInWechat = true
      }
      var analytics = AV.analytics({
        appId: 'antYy9lOFi5mkU9QKjtYmRLM-gzGzoHsz',
        appKey: 'jqyWxLyobpsmdwsJddJlDheb',
        channel: isInWechat ? 'weixin' : ''
      })
      window.analytics = analytics

      // 微信活动逻辑
      {
        var configOption = {
          timestamp: '{{$signature['timestamp']}}',
          nonceStr: '{{$signature['nonceStr']}}',
          signature: '{{$signature['signature']}}',
          jsApiList: ['onMenuShareTimeline', 'chooseWXPay', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareQZone']
        }
        var gid = getGId()
        window.gid = gid
        var wxconfig = new WxConfig(configOption, 'insect')
        var shareFlag = ''
        var shareMsg = function () {
          return {
            title: '29.9元4节「久趣昆虫主题课」北美外教带你探索"昆虫的秘密"！',
            desc: '4-12岁，在线上课。一起走进奥妙的昆虫世界，get纯正美语！',
            link: window.location.protocol + '//wx2.97kid.com/wx/insect/separately' + Math.ceil(Math.random() * 100) + '?_c=insect&_r=' + shareFlag + (gid ? '&gid=' + gid : ''),
            imgUrl: 'https://static-app.97kid.com/site-student/public/img/share.png',
            success: function (target) {
              analytics.send({
                event: 'insect-share-success',
                attr: {
                  gid: gid,
                  target: target
                }
              })
            }
          }
        }
        wxconfig.activeShare(shareFlag, '', shareMsg())
        var account = new Account()
        var groupBuyStatus = 0
        var campaignEnd = 1539187199
        var creator = 0

        analytics.send({
          event: 'p002_open',
          attr: {
            gid: gid,
            _r: utils.getUrlParam('_r')
          }
        })

        function getGId () {
          var gid = '{{$gid}}'
          if (!gid) {
            var path = localStorage.getItem('QKidsPathname')

            function getMatched (name, string) {
              if (string) {
                var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
                var len = string.indexOf('?') == 0 ? 1 : 0
                var r = string.substr(len).match(reg)
                if (r != null) return unescape(r[2])
              }
              return null
            }

            var localGid = getMatched('gid', decodeURIComponent(path))
            if (localGid) gid = localGid
          }
          return gid
        }

        account.forceLogin = false
        account.getUserInfo(function (err, userInfo) {
          if (!err && userInfo && userInfo.shareFlag) {
            $('#switch-account').text('切换账号')
            shareFlag = userInfo.shareFlag
            wxconfig.activeShare(shareFlag, '', shareMsg())
          }
          if (!err) {
            account.ajax({
              type: 'GET',
              path: '/s/my/products/1038/detail',
              success: function (result) {
                if (result.total > 0) {
                  $('#buyAlone-btn, #applyGroupFix').text('购买成功，分享好友')
                  groupBuyStatus = 1
                }
              },
              error: function (err) {
                console.log(err)
              }
            })
          }
        })

        //提交订单
        $('#applyGroupFix2, .stick-buyAlone-btn, #buyAlone-btn').click(function () {
          var pId = 1038
          analytics.send({
            event: pId === '1037' ? 'p002_group_click' : 'p002_bill_click',
            attr: {
              gid: gid,
              pId: pId
            }
          })
          if (groupBuyStatus === 3 && groupBuyStatus === 7) {
            window.location.href = '/wx'
          } else if (groupBuyStatus === 2 || groupBuyStatus === 1) {
            $('.share-mask').fadeIn()
            analytics.send({
              event: 'insect-share-click'
            })
          } else {
            submitOrder(pId)
          }
        })
        $('#buy-btn').click(function () {
          if (groupBuyStatus === 3 && groupBuyStatus === 7) {
            window.location.href = '/wx'
          } else if (groupBuyStatus === 2 || groupBuyStatus === 1) {
            $('.share-mask').fadeIn()
            analytics.send({
              event: 'insect-share-click',
              attr: {
                gid: gid
              }
            })
          } else {
            $('#confirmBuy').hide()
            submitOrder($(this).attr('data-field'))
          }
        })

        //关闭提示窗口
        $('#okBtn').click(function () {
          $('#groupStatus').fadeOut()
        })

        //关闭分享提示
        $('.share-mask').click(function () {
          $(this).fadeOut()
        })

        function submitOrder (pId) {
          var campUrl = window.location.protocol + '//' + window.location.host + '/wx/insect/separately' + Math.ceil(Math.random() * 100) + '?alert=qrcode'
          var campPara = {
            gid: getGId(),
          }
          account.forceLogin = true
          //提交订单久趣后台
          account.getUserInfo(function (userInfoError, userInforesult) {
            if (userInfoError) {
              $.toastAlert(userInfoError.message)
            } else {
              $('#switch-account').text('切换账号')
              if (isInWechat) {
                //配置微信分享接口
                shareFlag = userInforesult.shareFlag
                wxconfig.activeShare(shareFlag, '', shareMsg())
              }
              var payChannel = isInWechat ? 'weixin' : 'alipay'
              account.ajax({
                type: 'GET',
                path: '/s/customers/' + window.localStorage.getItem(account.openId) + '/status',
                success: function (status) {

                  account.ajax({
                    type: 'POST',
                    path: '/s/bills',
                    data: {
                      productId: pId,
                      payChannel: payChannel,
                      returnUrl: status.subscribe ? window.location.protocol + '//' + window.location.host + '/wx/insect/separately' + Math.ceil(Math.random() * 100) : window.location.protocol + '//' + window.location.host + '/wx/verifypayment/' + pId + '?campUrl=' + encodeURIComponent(campUrl),
                      tradeType: 'JSAPI',
                      openId: window.localStorage.getItem(account.openId),
                      groupBuyingId: groupBuyStatus === 5 ? '' : encodeURIComponent(decodeURIComponent(campPara['gid']))
                    },
                    success: function (data) {
                      //唤起微信支付
                      if (data.status !== 'error') {
                        analytics.send({
                          event: pId === '1037' ? 'p002_group_bill' : 'p002_bill',
                          attr: {
                            gid: gid,
                            pid: pId,
                            payChannel: payChannel
                          }
                        })
                        if (isInWechat) {
                          var jsApiParameters = JSON.parse(data.jsApiParameters)
                          jsApiParameters.success = function () {
                            analytics.send({
                              event: pId === '1037' ? 'p002_group_pay_success' : 'p002_pay_success',
                              attr: {
                                gid: gid,
                                pid: pId,
                                payChannel: payChannel
                              }
                            })
                          }
                          if (status.subscribe) jsApiParameters.redirect = window.location.protocol + '//' + window.location.host + '/wx/insect/separately' + Math.ceil(Math.random() * 100)
                          wxconfig.pay(data.bill_id, pId, jsApiParameters, encodeURIComponent(campUrl))
                        } else {
                          window.location.href = data.url
                        }
                      } else {
                        $.toastAlert('下单失败，请重试')
                      }
                    },
                    error: function (err) {
                      if (err.code === 'product.rejected.by.bought.products') {
                        $.toastAlert('您已经参加活动')
                      }
                    }
                  })
                },
                error: function (err) {
                  $.toastAlert(err.message, 2)
                }
              })
            }
          })
        }

        //切换账号
        $('.switch-account').off('click').on('click', function () {
          $('.account-mask').fadeOut()
          account.forceLogin = true
          account.checkLoginStatus(function () {
            account._showLogin(function () {}, true)
          })
        })
      }
    })

  })(window.Zepto)


</script>

<script src="//imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.2.1.js" charset="utf-8"></script>
<script>
  $(function () {
    var timeStampStart, timeStampEnd, timeout
    //初始化视频
    var player = new TcPlayer(
      //页面放置播放位置的元素 ID
      'videoContainer',
      {
        'm3u8': 'http://1251352844.vod2.myqcloud.com/45f5686avodtransgzp1251352844/5ca0c2d87447398156358308495/v.f20.mp4',
        'autoplay': false,
        'coverpic': '',
        'width': '640',
        'height': '480',
        'live': false,
        'systemFullscreen': true,
      })

    //观看视频
    $('#viewVideo').click(function () {
      $('#videoMask').fadeIn(300)
      player.play()
      timeStampStart = new Date()
      analytics.send({
        event: 'p002_video_open',
        attr: {
          gid: gid,
          _r: utils.getUrlParam('_r')
        }
      })
      timeout = setTimeout(function () {
        analytics.send({
          event: 'p002_video_more_than_minute',
          attr: {
            gid: gid,
            _r: utils.getUrlParam('_r')
          }
        })
      }, 60000)
    })

    //关闭视频
    $('#closeVideo').click(function () {
      player.pause()
      clearTimeout(timeout)
      timeStampEnd = new Date()
      $('#videoMask').fadeOut(300)
      if ((timeStampEnd - timeStampStart) / 1000 >= 45) {
        analytics.send({
          event: 'p002_video_more_than_minute',
          attr: {
            gid: gid,
            _r: utils.getUrlParam('_r')
          }
        })
      }
      if ((timeStampEnd - timeStampStart) / 1000 >= 65) {
        analytics.send({
          event: 'p002_video_end',
          attr: {
            gid: gid,
            _r: utils.getUrlParam('_r')
          }
        })
      }
    })
  })
</script>


</body>
</html>